<template>
  <div class="app-container">

    <div class="box ph-30">
      <div class="panel">
        <div class="panel-header">
          <h3 class="panel-title">费用明细</h3>
        </div>
        <div class="panel-body">
          <el-row>
            <el-col :span="24">

              <el-collapse v-model="activeCollapse">
                <!-- 报名费-->
                <el-collapse-item v-if="form.cptRegistrationFee?.totalFee>0" name="1">
                  <template #title>
                    <div class="titlebar">
                      {{ form.cptRegistrationFee?.name }}
                      <div class="fr">
                        <span class="num">{{ form.cptRegistrationFee?.count }}人</span>
                        合计:<span class="money">{{ form.cptRegistrationFee?.totalFee }}元</span>
                      </div>
                    </div>
                  </template>
                  <div>
                    <el-table border :data="form.cptRegistrationFee?.info" style="width: 100%">
                      <el-table-column type="index" label="序号" width="50" />
                      <el-table-column label="姓名" prop="personInfo.realName" />
                      <el-table-column label="性别">
                        <template #default="scope">
                          <span v-if="scope.row.personInfo.sex=='0'">女</span>
                          <span v-else>男</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="证件号码" prop="personInfo.idcType">
                        <template #default="scope">
                          <span v-if="scope.row.personInfo.idcType=='0'">身份证</span>
                          <span v-if="scope.row.personInfo.idcType=='1'">护照</span>
                          <span v-if="scope.row.personInfo.idcType=='2'">其他</span>
                          <div>{{ scope.row.personInfo.idcCode }}</div>
                        </template>
                      </el-table-column>
                      <el-table-column label="出生日期">
                        <template #default="scope">
                          {{ scope.row.personInfo.birth.substring(0,10) }}
                        </template>
                      </el-table-column>
                      <el-table-column label="费用">
                        <template #default="scope">
                          ¥{{ scope.row.registrationFee }}
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </el-collapse-item>
                <el-collapse-item v-if="form.cptCompatibleFee?.totalFee>0" name="3">
                  <template #title>
                    <div class="titlebar">
                      {{ form.cptCompatibleFee?.name }}
                      <div class="fr">
                        <span class="num">{{ form.cptCompatibleFee?.count }}人</span>
                        合计:<span class="money">{{ form.cptCompatibleFee?.totalFee }}元</span>
                      </div>
                    </div>
                  </template>
                  <div>
                    <el-table border :data="form.cptCompatibleFee?.info" style="width: 100%">
                      <el-table-column type="index" label="序号" width="50" />
                      <el-table-column label="姓名" prop="personInfo.realName" />
                      <el-table-column label="性别">
                        <template #default="scope">
                          <span v-if="scope.row.personInfo.sex=='0'">女</span>
                          <span v-else>男</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="证件类型">
                        <template #default="scope">
                          <span v-if="scope.row.personInfo.idcType=='0'">身份证</span>
                          <span v-if="scope.row.personInfo.idcType=='1'">护照</span>
                          <span v-if="scope.row.personInfo.idcType=='2'">其他</span>
                          <div>{{ scope.row.personInfo.idcCode }}</div>
                        </template>
                      </el-table-column>
                      <el-table-column label="费用" prop="compatibleFee" />
                    </el-table>
                  </div>
                </el-collapse-item>
                <el-collapse-item name="2">
                  <template #title>
                    <div class="titlebar">
                      {{ form.cptInsuranceFee?.name }}
                      <div class="fr">
                        合计:<span class="money">{{ cptInsuranceFee }}元</span>
                      </div>
                    </div>
                  </template>
                  <div>
                    <el-checkbox-group v-model="buyInsurancePersonIds" @change="choseInsuranceFee">
                      <el-table border :data="form.cptInsuranceFee?.info" style="width: 100%">
                        <el-table-column type="index" label="序号" width="50" />
                        <el-table-column label="姓名" prop="personInfo.realName" />
                        <el-table-column label="性别">
                          <template #default="scope">
                            <span v-if="scope.row.personInfo.sex=='0'">女</span>
                            <span v-else>男</span>
                          </template>
                        </el-table-column>
                        <el-table-column label="证件类型">
                          <template #default="scope">
                            <span v-if="scope.row.personInfo.idcType=='0'">身份证</span>
                            <span v-if="scope.row.personInfo.idcType=='1'">护照</span>
                            <span v-if="scope.row.personInfo.idcType=='2'">其他</span>
                            <div>{{ scope.row.personInfo.idcCode }}</div>
                          </template>
                        </el-table-column>
                        <el-table-column label="出生日期">
                          <template #default="scope">
                            {{ scope.row.personInfo.birth.substring(0,10) }}
                          </template>
                        </el-table-column>
                        <el-table-column v-if="form.cptInsuranceFee?.must=='0'" label="购买保险" align="center">
                          <template #default="scope">
                            <span v-if="scope.row.lastBuyFlag=='1'">已购</span>
                            <el-checkbox v-else :label="scope.row.personId">
                              ￥{{ scope.row.insuranceFee }}
                            </el-checkbox>
                          </template>
                        </el-table-column>
                        <!--                        <el-table-column label="费用" prop="insuranceFee" />-->
                      </el-table>
                    </el-checkbox-group>
                  </div>
                </el-collapse-item>
                <el-collapse-item v-if="form.otherFee?.totalFee>0" name="4">
                  <template #title>
                    <div class="titlebar">
                      {{ form.otherFee?.name }}
                      <div class="fr">
                        <span class="num">{{ form.otherFee?.count }}人</span>
                        合计:<span class="money">{{ othermm }}元</span>
                      </div>
                    </div>
                  </template>
                  <div>
                    <el-checkbox-group v-model="hasOthersPersonIds" @change="choseOtherFee">
                      <el-table border :data="form.otherFee?.info" style="width: 100%">
                        <el-table-column type="index" label="序号" width="50" />
                        <el-table-column label="姓名" prop="personInfo.realName" />
                        <el-table-column label="性别">
                          <template #default="scope">
                            <span v-if="scope.row.personInfo.sex=='0'">女</span>
                            <span v-else>男</span>
                          </template>
                        </el-table-column>
                        <el-table-column label="证件类型">
                          <template #default="scope">
                            <span v-if="scope.row.personInfo.idcType=='0'">身份证</span>
                            <span v-if="scope.row.personInfo.idcType=='1'">护照</span>
                            <span v-if="scope.row.personInfo.idcType=='2'">其他</span>
                            <div>{{ scope.row.personInfo.idcCode }}</div>
                          </template>
                        </el-table-column>
                        <el-table-column label="是否自备">
                          <template #default="scope">
                            <span v-if="scope.row.allBringOwn=='0'">￥{{ scope.row.otherFee }}</span>
                            <el-checkbox v-else :label="scope.row.personId" checked>
                              ￥{{ scope.row.otherFee }}
                            </el-checkbox>
                          </template>
                        </el-table-column>
                      </el-table>
                    </el-checkbox-group>
                  </div>
                </el-collapse-item>
              </el-collapse>
              <el-divider />
              <div>
                <h3>支付方式</h3>
                <el-radio-group v-model="form.payType">
                  <el-radio v-if="myBalance>'0'" label="0" size="large" border><img src="@/assets/img/zf02.png" style="width: 30px;">
                    会员卡支付<span>(余额 <i class="orange">¥{{ myBalance }}</i>)</span>
                  </el-radio>
                  <el-radio label="1" size="large" border><img src="@/assets/img/zf_wx.png">微信</el-radio>
                  <el-radio label="2" size="large" border><img src="@/assets/img/zf_xj.png">线下支付</el-radio>
                </el-radio-group>
              </div>
            </el-col>
          </el-row>


        </div>
        <div class="panel-footer text-center" style="justify-content: space-between;padding: 0 20px">
          <p class="footFee">
            <span v-if="form.cptRegistrationFee?.totalFee>0">{{ form.cptRegistrationFee?.name }}:{{ form.cptRegistrationFee.totalFee }}元</span>
            <span v-if="form.cptCompatibleFee?.totalFee>0">{{ form.cptCompatibleFee?.name }}:{{ form.cptCompatibleFee.totalFee }}元</span>
            <span>{{ form.cptInsuranceFee?.name }}:{{ cptInsuranceFee }}元</span>
            <span v-if="form.otherFee?.totalFee>0">{{ form.otherFee?.name }}:{{ othermm }}元</span>
            <span v-if="form.teamFee?.totalFee>0">{{ form.teamFee?.name }}:{{ form.teamFee?.totalFee }}元</span>
            <span v-if="form.cptDepositFee?.totalFee>0">{{ form.cptDepositFee?.name }}:{{ form.cptDepositFee.totalFee }}元</span>
          </p>
          <p class="footTotal">
            合计：<span>¥{{ finialFee }}</span>
          </p>
          <!--          <el-button type="success" plain round @click="goPrev()">上一步</el-button>-->
          <el-button type="success" round @click="submitForm()">提交订单</el-button>
        </div>
      </div>
    </div>
    <el-dialog v-model="showResult" :close-on-click-modal="false">
      <el-result icon="success" title="支付成功" />
      <template #extra>
        <el-button type="primary" @click="downloadVoucher">下载报名凭证</el-button>
        <el-button type="primary" @click="goMyMatch">查看订单</el-button>
      </template>
    </el-dialog>
    <el-dialog v-model="showOrganizerInfo" title=" 线下支付" width="400px">
      <ul class="orgbox">
        <li>单位：{{ org.organizerName }}</li>
        <li>开户行：{{ org.organizerBank }}</li>
        <li>账户：{{ org.organizerAccount }}</li>
        <li>打款金额：<span class="orange">¥{{ org.organizerFee }}</span></li>
      </ul>
      <template #footer>
        <div class="dialog-footer text-center">
          <el-button type="primary" @click="downloadVoucher">下载报名凭证</el-button>
          <el-button type="primary" @click="goMyMatch">查看订单</el-button>
        </div>
      </template>
    </el-dialog>
    <we-pay ref="wePayRef" @close="goMyMatch" />
  </div>
</template>

<script setup>
import { reactive, toRefs } from 'vue'
import { getCurrentInstance, onMounted } from '@vue/runtime-core'
const { proxy } = getCurrentInstance()
const router = useRouter()
const route = useRoute()
import * as match from '@/api/match/pc'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
const data = reactive({
  form: {},
  activeCollapse: ['1', '2', '3', '4'],
  myBalance: '',
  finialFee: '',
  cptInsuranceFee: '',
  othermm: '',
  buyInsurancePersonIds: [],
  hasOthersPersonIds: [],
  org: {},
  showOrganizerInfo: false,
  showResult: false
})
const { form, activeCollapse, myBalance, finialFee, org, showOrganizerInfo, showResult, cptInsuranceFee, othermm, buyInsurancePersonIds, hasOthersPersonIds } = toRefs(data)

let entryId
let groupId = ''
let cptId
let baseTotal
let bxdanjia
let otherdanjia
onMounted(() => {
  cptId = route.params.id
  if (route.query.personId) {
    entryId = route.query.personId
  }
  if (route.query.groupId) {
    groupId = route.query.groupId
    entryId = route.query.groupId
  }
  getTotalFee()
  getMemberInfoByCptId()
})
function getTotalFee() {
  match.getTotalFee({
    entryId: entryId,
    cptId: cptId
  }).then(res => {
    form.value = res.data
    finialFee.value = form.value.totalFee
    baseTotal = parseFloat(form.value.totalFee) - parseFloat(form.value.otherFee?.totalFee || 0)
    cptInsuranceFee.value = form.value.cptInsuranceFee.totalFee
    othermm.value = form.value.otherFee.totalFee
    bxdanjia = form.value.cptInsuranceFee.info[0]?.insuranceFee
    if (form.value.otherFee.info.length > 0) {
      otherdanjia = form.value.otherFee.info[0]?.otherFee
      for (const ren of form.value.otherFee.info) {
        hasOthersPersonIds.value.push(ren.personId)
      }
    }
  })
}
function getMemberInfoByCptId() {
  match.getMemberInfoByCptId(cptId).then((res) => {
    myBalance.value = res.data.balance
  })
}
function getTotal() {
  finialFee.value = parseFloat(baseTotal) + parseFloat(cptInsuranceFee.value) + parseFloat(othermm.value)
}
// 保险费
function choseInsuranceFee(e) {
  console.log(e, buyInsurancePersonIds.value)
  cptInsuranceFee.value = e.length * bxdanjia
  getTotal()
  // finialFee.value = parseFloat(cptInsuranceFee.value) + parseFloat(form.value.totalFee)
}
// 其他费用
function choseOtherFee(e) {
  console.log(e,hasOthersPersonIds.value)
  othermm.value = e.length * otherdanjia
  getTotal()
}
function submitForm() {
  // 提交订单
  var obj = {
    insruanceFee: cptInsuranceFee.value,
    buyInsurancePersonIds: buyInsurancePersonIds.value.toString() || '',
    otherFee: othermm.value,
    bringPersonIds: hasOthersPersonIds.value.toString() || '',
    cptId: cptId,
    groupId: groupId
  }
  console.log(obj)
  creatBill(obj)
}
let orderId
function creatBill(obj) {
  if (!form.value.payType) {
    ElMessage.error('请选择支付方式')
    return
  }
  match.commitSign(obj).then(res => {
    orderId = res.data
    match.payMatch({ orderId: orderId, payType: form.value.payType }).then(res => {
      console.log(res.data)
      if (form.value.payType == 2) {
        org.value = res.data.org
        showOrganizerInfo.value = true
      } else if (form.value.payType == 1) {
        // 微信
        proxy.$refs['wePayRef'].open(res.data)
      } else {
        showResult.value = true
      }
    })
  })
}
function goMyMatch() {
  router.push({
    name: 'myMatch'
  })
}
function downloadVoucher() {
  //下载报名凭证
  proxy.download(
      `/pdf/getPayedOrderPdf/${cptId}/${groupId||0}`,{},'报项凭证.pdf'
  )
}
</script>

<style scoped lang="scss">
.footFee{
  color: #95A1A6;
  font-size: 16px;
  span{margin: 0 20px}
}
.footTotal{
  color: #000000;
  font-size: 16px;
  span{
    color: #EB6100;
    font-size: 22px;}
}

	.app-container{ padding: 0;background: #F5F7F9;}
	.panel-footer .el-button--success{background: linear-gradient(270deg, #39DBA7, #38EF7D);border: none;
		padding: 0 40px;
		font-size: 16px;
	}
	.panel-footer .el-button--success.is-plain{background: #fff;border:1px solid #2ED981;color: #2ED981;}
	.el-collapse{--el-collapse-border-color:transparent}
	.el-collapse-item{	margin: 0 0 30px;padding: 0 20px;
	border-radius: 10px;
	background: #FBFCFD;
	--el-collapse-border-color:transparent;
	--el-collapse-header-bg-color:transparent;
	--el-collapse-content-bg-color:transparent;
	}
	.titlebar{width: 100%;
		font-size: 18px;
		.fr{
			.num{color: #7B7F83;margin-right: 20px ;}
			.money{color: #FF8124;margin:0 6px;}
		}
	}
	:deep(.el-radio.el-radio--large .el-radio__label){display: flex;    align-items: center;
		img{margin-right: 6px;}
	}
	:deep(.el-radio.is-bordered.el-radio--large .el-radio__inner){
		width: 25px;height: 25px;
	}
	:deep(.el-radio__inner::after){
		width: 7px;height: 7px;
	}
  .fixCollapseItem{padding: 20px;font-weight: 500;}
  .orange{font-size: 16px;font-style: normal;font-weight: bold}
</style>
